<template>
  <div>
    <!-- <div>
      <hdMore></hdMore>
    </div> -->
    <el-table
    v-bind="$attrs"
    :border="border"
    :data="tableData"
    :stripe="stripe"
    style="width: 100%"
    :max-height="maxHeight"
    @selection-change="handleSelectionChange"
    @cell-click="handleCell"
  >
    <el-table-column
      v-if="hasSelect"
      type="selection"
      width="55"
      align="center"
      :selectable="checkboxSelect"
    >
    </el-table-column>
    <el-table-column
      v-if="hasRadioSelect"
      width="55"
      align="center"
      :selectable="radioSelect"
    >
      <template slot-scope="scope">
        <el-radio class="radio" v-model="selectCode" :label="scope.row.code" >
          <span></span>
        </el-radio>
      </template>
    </el-table-column>
    <el-table-column
      v-if="hasIndex"
      label="序号"
      type="index"
      width="55"
      align="center"
    >
    </el-table-column>
    <el-table-column
      v-for="item in tableColumn"
      :key="item.field"
      :prop="item.field"
      :label="item.label"
      :width="item.width"
      :min-width="item.minWidth"
      :fixed="item.fixed"
      :align="item.align"
      :sortable="item.sortable"
      :show-overflow-tooltip="true"
    >
      <template slot-scope="scope">
        <div v-if="item.type==='handler'">
          <el-button style="font-size: 14px;" v-for="btn in item.btnlist" :key="btn.name" type="text" size="mini" @click.stop="btn.handle(scope.$index, scope.row)">{{btn.name}}</el-button>
        </div>
        <div v-else>
          <div v-if="item.isStatus" class="statusStyle">
            {{ item.format(scope.row[item.field])||scope.row[item.field] }}
          </div>
          <div v-else :style="item.style">
            {{ scope.row[item.field] }}
          </div>
        </div>
      </template>
    </el-table-column>
    <!-- 具名插槽，操作列使用 -->
    <slot name="handle"></slot>
  </el-table>
  </div>
</template>

<script>
import hdMore from './handleMore.vue'
export default {
  props: [
    "tableData",
    "tableColumn",
    "border",
    "maxHeight",
    "hasSelect",
    "hasRadioSelect",
    "hasIndex",
    "stripe",
  ],
  components:{hdMore},
  data() {
    return {
      multipleSelection: [],
      selectCode:''
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 控制行是否可选
    checkboxSelect(row) {
      if (this.$parent.checkboxSelect) {
        return this.$parent.checkboxSelect(row);
      } else {
        return true;
      }
    },
    radioSelect(row){
      if(this.$parent.radioSelect){
        return this.$parent.radioSelect(row);
      }else{
        return true;
      }
    },

    handleCell(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.$emit("handleCell", { row, column, cell, event });
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__empty-block{
  width: 100% !important;
}
/deep/.el-table__header-wrapper{
    border-top: 1px solid rgba(232, 232, 232, 1);
    border-radius: 4px;
}
/deep/thead {
  .el-table__cell{
    color:#000;
    background-color: rgba(250, 250, 250, 1)  !important;
  }
}
.statusStyle{
  color:#2074F3;
  border: 1px #2074F3 solid;
  padding:2px 0px;
  text-align: center;
  width: fit-content;
  padding: 0 10px;
  min-width: 80px;
  box-sizing: border-box;
}
</style>
